<template>
  <div class="container">
    <h1>  </h1>
    <Category title="美食" >
      <img  slot="content"  width="100%" src="./assets/rou.jpg" />
      <a slot="footer" href="#">更多</a>
    </Category>
    <Category title="游戏">
      <img slot="content" width="100%" :src="sonUrl">
<!--      <a slot="footer" href="#">单机</a>-->
<!--      <a slot="footer" href="#">网络</a>-->
      <div slot="footer" class="footer">
        <a  href="#">单机</a>
        <a  href="#">网络</a>
              </div>
            </Category>
            <Category title="电影"  >
              <ul  slot="content" >
              <li v-for="(item,index ) in films" :key="index">{{item}}</li>
            </ul>
            </Category>
          </div>
        </template>

        <script>
        import Category from "./components/Category";
        export default {
          name: 'App',
          components:{Category},
          data(){
            return{
              foods:["土豆","地瓜","红薯","山药"],
              games:["王者","魔兽","吃鸡","扑克"],
              films:["变形钨钢","钢铁侠","西瓜太郎","独立日"],
              // publicPath: process.env.BASE_URL,
              sonUrl:'static/image/tou.jpg'
            }
          }
        }
        </script>
        <style>
          .container,.footer{
            display: flex;
            justify-content: space-around;
          }
          ul{
            text-align: left;
          }
        </style>
